<script setup lang="ts">
import { onMounted, reactive, computed } from 'vue';
import { getDictList, type Dict } from '@/api/system/dict';
import PlusOutlined from '@iconify-icons/ant-design/plus-outlined';
import EditOutlined from '@iconify-icons/ant-design/edit-outlined';
import DeleteOutlined from '@iconify-icons/ant-design/delete-outlined';

import type { DictFormFields } from '@/views/system/dict/type';
import { ElMessageBox, ElMessage } from 'element-plus';

import DrawerUpdate from './drawerUpdate.vue';

defineOptions({
  name: 'DictAside'
});
const $emit = defineEmits(['dict-click']);
onMounted(() => {
  fetchDictList();
});

const createDictFields = (): DictFormFields => {
  return {
    id: undefined,
    code: '',
    name: '',
    description: ''
  };
};

const state = reactive({
  list: [] as Dict[],
  listLoading: true,
  visible: false,
  currentRow: null as Dict | null,
  buttonRef: null,
  tooltipRef: null,
  isDisabled: true,
  drawerUpdate: {
    visible: false,
    type: 'add',
    typeMap: {
      add: '新增字典',
      update: '编辑字典'
    },
    value: createDictFields()
  }
});
const drawerTitle = computed(() => {
  return state.drawerUpdate.typeMap[state.drawerUpdate.type];
});

const onAdd = () => {
  state.drawerUpdate.type = 'add';
  state.drawerUpdate.value = createDictFields();
  state.drawerUpdate.visible = true;
};
const onRemove = () => {
  ElMessageBox.confirm('确认要删除该字典吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功'
      });
      fetchDictList();
    })
    .catch(() => {});
};
const onUpdate = () => {
  state.drawerUpdate.type = 'update';
  state.drawerUpdate.visible = true;
};

const onClickRow = data => {
  state.isDisabled = false;
  state.drawerUpdate.value = data;
  $emit('dict-click', data.code);
};
const onMouseOver = (row: Dict, e: MouseEvent) => {
  state.visible = true;
  state.currentRow = row;
  state.buttonRef = e.currentTarget;
};
const onMouseleave = (e: MouseEvent) => {
  state.visible = false;
};
const fetchDictList = () => {
  getDictList().then(({ code, data }) => {
    if (code !== 0) return;
    state.listLoading = false;
    state.list = data;
  });
};
</script>

<template>
  <el-card shadow="never" :body-style="{ padding: '10px' }" class="border-none">
    <div class="flex items-center justify-around mb">
      <el-button type="primary" :disabled="state.isDisabled" @click="onAdd">
        <IconifyIconOffline class="mr-xs" :icon="PlusOutlined" />
        新增
      </el-button>
      <el-button type="danger" :disabled="state.isDisabled" @click="onRemove">
        <IconifyIconOffline class="mr-xs" :icon="EditOutlined" />
        删除
      </el-button>
      <el-button type="warning" :disabled="state.isDisabled" @click="onUpdate">
        <IconifyIconOffline class="mr-xs" :icon="DeleteOutlined" />
        修改
      </el-button>
    </div>
    <el-table
      v-loading="state.listLoading"
      :data="state.list"
      highlight-current-row
      height="calc(100vh - 196px)"
      @row-click="onClickRow"
    >
      <el-table-column prop="name" label="字典名称" align="center">
        <template #default="{ row }">
          <span
            @mouseover="onMouseOver(row, $event)"
            @mouseleave="onMouseleave"
          >
            {{ row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="字典值"
        min-width="80"
        align="center"
      />
    </el-table>
    <el-tooltip
      ref="tooltipRef"
      :visible="state.visible"
      placement="right"
      :popper-options="{
        modifiers: [
          {
            name: 'computeStyles',
            options: {
              adaptive: false,
              enabled: false
            }
          }
        ]
      }"
      :virtual-ref="state.buttonRef"
      virtual-triggering
    >
      <template #content>
        <ul class="leading-5 max-w-xs flex-1">
          <li>字典名称：{{ state.currentRow.name }}</li>
          <li>字典描述：{{ state.currentRow.description || '--' }}</li>
          <li>创建时间：{{ state.currentRow.createTime }}</li>
        </ul>
      </template>
    </el-tooltip>
    <drawer-update
      v-model="state.drawerUpdate.visible"
      size="540px"
      :title="drawerTitle"
      :value="state.drawerUpdate.value"
    />
  </el-card>
</template>
